<template>
	<view>

			<!-- 日历 -->
		<view class="qd-tongji-content">
			<view>
				<uni-calendar
				ref="calendar" 
				:insert="false" 
				@confirm="confirm" />
			</view>
			<view style="padding:20rpx 40rpx;background:#FFFFFF;box-shadow: 0 0 12px #CCCCCC;">
				<view class="open-calendar" @click="open">选择日期</view>
			</view>
			
			
			<!-- 签到列表 -->
			<view class="qd-tongji-list">
				<view class="qd-tongji-list-title">
					<view>签到月度汇总</view>
					<view>本月因签到28次</view>
				</view>
				<uni-collapse accordion="true">
				    <uni-collapse-item
					 title="已签到(22次)" >
				        <uni-list>
				        	<uni-list-item 
				        	v-for="(item,index) in listItem" 
							:show-arrow="false"
				        	:key="index"
				        	:title="item.title" 
				        	 />
				        </uni-list>
				    </uni-collapse-item>
				    <uni-collapse-item 
					title="未签到(15次)"
					>
				       <uni-list>
				       	<uni-list-item 
				       	v-for="(item,index) in listItem" 
						:show-arrow="false"
				       	:key="index"
				       	:title="item.title" 
				       	 />
				       </uni-list>
				    </uni-collapse-item>
				</uni-collapse>
			</view>
		</view>
	</view>
</template>

<script>
	import {uniCalendar} from "@/lib/components/uni-calendar/uni-calendar"
	import {uniCollapse} from "@/lib/components/uni-collapse/uni-collapse.vue"
	import {uniCollapseItem} from "@/lib/components/uni-collapse-item/uni-collapse-item.vue"
	import uniList from "@/lib/components/uni-list/uni-list.vue"
	import uniListItem from "@/lib/components/uni-list-item/uni-list-item.vue"
	export default {
		data() {
			return {
				// curIndex: 0,
				date:"",
				listItem: [
					{
						title: '【11-01】计算机网络课签到'
					},
					{
						title: '【11-01】计算机网络课签到'
					},
					{
						title: '【11-01】计算机网络课签到'
					},
					{
						title: '【11-01】计算机网络课签到'
					}
				]
			}
		},
		onLoad(options) {
			// this.curIndex = parseInt(options.id);
			let D = new Date();
			this.date = D.getFullYear()+"年"+D.getMonth()+"月"
		},
		methods: {
			open() {
				this.$refs.calendar.open();
			},
			confirm(e) {
				/**
						 * "year": 2019,
	                        "month": 11,
	                        "date": 13,
						 */
				this.date = e.year+"年"+e.month+"月";
			}
		},
		components: {
			uniCalendar,
			uniCollapse,
			uniCollapseItem,
			uniList,
			uniListItem
		}
	}
</script>

<style>
	.open-calendar{
		font-size: 12px;
		color: #009DFF;
		width: 200rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		border: 1px solid #009DFF;
		border-radius: 20rpx;
	}
	.qd-tongji-list-title{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 12px;
		color: #CCCCCC;
	}
	.qd-tongji-list-title view:nth-child(1){
		padding-left: 40rpx;
	}
	.qd-tongji-list-title view:nth-child(2){
		padding-right: 40rpx;
	}
</style>
